<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>菜单添加页面</title>
<link href="<%=request.getContextPath()%>/css/Default.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/redmond/jquery-ui-1.8.14.custom.css"
	rel="stylesheet" type="text/css"></link>
<link href="<%=request.getContextPath()%>/css/Dialog.css"
	rel="stylesheet" type="text/css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="<%=request.getContextPath()%>/scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/HRM.js" type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jquery-ui-1.8.14.min.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jquery.validate.min.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jquery.validate.message_cn.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/Dialog.js"
	type="text/javascript"></script>
</head>
<body class="dialogBody">
<script type="text/javascript">
function beforeFormSubmitFunc(){
	if(!$("#menuAddForm").valid()){
		createAlertDialog('提示信息','还有未正确填写的项，请参照提示修改!');
		return false;
	}else{
		return true;
	}
}
$().ready(function(){
	$("#menuAddForm").validate({
		rules:{
			actionName:{
				required:true,
				maxlength:50
			},
			actionCode:{
				required:true,
				maxlength:20
			},
			path:{
				required:true,
				maxlength:50
			}
		},
		errorPlacement:function(error,element){
			createTooltip(error,element);
		},
		success:function(error,element){
			sucRemoveTooltip(error);
		},
		event:'blur'|'keyup'|'focus'|'keydown'
	});
	$('#menuAddForm').find("input").focus(function(){
		$(this).valid();
	});
	$('#menuAddForm').find("input").blur(function(){
		$('#'+$(this).attr('id')+'Error').remove();
	});
	$('#menuAddForm').find('#actionName').focus();
	var path="<%=request.getContextPath()%>/menu.do?method=getMenus";
	$.getJSON(path,function(data,status,xhr){
		data=data[0];
		$("#menuId").html("");
		for(var i=0;i<data.length;i++){
			$("#menuId").append("<option value='"+data[i]['id']+"'>"+data[i]['menuName']+"</option>");
		}
	});
	$("#iconImg").die('click').live('click',function(){
		var path='<%=request.getContextPath()%>/icon.do?method=getAllParentIcons';
		$.getJSON(path,function(data,status,xhr){
			$("#iconDiv").html("");
			var iconULHtml = "<ul style='margin-top:10px;'>";
			data=data[0];
			for(var i=0;i<data.length;i++){
				iconULHtml+="<li style='float:left;background:#F7F7F7;'>";
				iconULHtml+="<img class ='iconList' style='margin-left:10px;cursor:pointer;border:1px solid #cccccc;width:20;height:20;background:#ffffff;' title='点击选中图标' src='<%=request.getContextPath()%>/"+data[i]['path']+"' name='"+data[i]['path']+"'/>";
				iconULHtml+="</li>";
			}
			iconULHtml += "</ul>";
			$(iconULHtml).appendTo($("#iconDiv"));
			$("#iconDiv").css({width:$("body").width(),height:$("body").height(),"z-index":1000,"position":"absolute","top":0,"left":0,"margin":0,"padding":0}).show();
			$(".iconList").unbind('click').bind('click',function(){
				var src=$(this).attr('src');
				var path=$(this).attr('name');
				$("#iconDiv").hide();
				$("#iconImg").attr('src',src);
				$("#icon").val(path);
			});
		});
	});
});
</script>
<form id="menuAddForm" action='<%=request.getContextPath()%>/menu.do?method=addAction' method="post">
<center>
<table width="100%" align="center" cellpadding="2" cellspacing="0">
    <tr>
      <td height="10"></td>
      <td></td>
    </tr>
    <tr>
      <td>
   <fieldset>
    <legend><label>菜单信息</label></legend>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="39%" height="30" align="right" >菜单名称：</td>
          <td width="61%"><input name="actionName"  type="text" id="actionName" /><span class='requiredSpan'>*</span></td>
        </tr>
        <tr>
          <td height="30" align="right" >菜单编码：</td>
          <td><input name="actionCode" type="text" id="actionCode"/><span class='requiredSpan'>*</span></td>
        </tr>
        <tr>
          <td height="30" align="right" >父级菜单：</td>
          <td><select id="menuId" name="menuId">
          	<option value='40'>工作桌面</option>
          	<option value='41'>组织机构</option>
          	<option value='42'>人事管理</option>
          	<option value='43'>绩效管理</option>
          	<option value='44'>福利发放</option>
          	<option value='45'>薪酬管理</option>
          	<option value='46'>系统管理</option>
          </select><span class='requiredSpan'>*</span></td>
        </tr>
        <tr>
          <td height="30" align="right" >图标：</td>
          <td><input name="icon" type="hidden" value="/images/icons/icon022a4.gif"
									id="icon" />
			<img src='<%=request.getContextPath()%>/images/icons/icon022a4.gif' id="iconImg" style="cursor:pointer;"> (点击图标更换)</td>
        </tr>
        <tr>
          <td height="30" align="right" >是否显示：</td>
          <td ><input type='radio' name='viewMode' id='Status_0' value='Y' checked><label for='Status_0'>是</label><input type='radio' name='viewMode' id='Status_1' value='N'><label for='Status_1'>否</label></td>
        </tr>
        <tr>
          <td height="30" align="right" >URL：</td>
          <td><input name="path"  type="text"  id="path" /><span class='requiredSpan'>*</span></td>
        </tr>
        <tr>
          <td height="30" align="right" >备注：</td>
          <td><input name="remark"  type="text" id="remark"/>
            </td>
        </tr>
      </table>
      </fieldset>
      </td>
    </tr>
	</table>
	</center>
</form>
<div style="display:none;background:#ffffff;" id="iconDiv">
</div>
</body>
</html>